<!-- 普通数据转响应式数据 -->

<!-- 逻辑代码块-->
<script setup lang="ts">
// 导入reactive函数
import { reactive } from 'vue'
// 利用reavtive函数创建响应式数据对象
const person = reactive({
  name: '梨花',
  age: 18,
  hobby: ['玩电脑', '写字', '画画'],
})
// 该函数无法将原来的对象重新赋值
// 如果重新赋值，则会丢失响应性
</script>

<!-- 结构块:-->
<template>
  <div>
    <p class="p1">姓名：{{ person.name }}</p>
    <p class="p2" @click="person.age++">年龄：{{ person.age }}</p>
    <p class="p3" @click="person.hobby.push('唱歌')">爱好：{{ person.hobby }}</p>
  </div>
</template>

<!-- 样式块-->
<style scoped>
div .p1 {
  background-color: antiquewhite;
}
div .p2 {
  background-color: beige;
}
</style>
